<template>
	<gracePage :customHeader="false">
		<!-- 页面主体 -->
		<view slot="gBody">
			<view style="padding: 30rpx 30rpx 30rpx 30rpx; background-color:#F6F7F8; display: flex;flex-direction: row;">
				<graceSearch @inputting="searchInput"></graceSearch>
				<button type="default" class="grace-button" style="height: 66rpx;line-height: 66rpx;border-radius: 33rpx;width: 120rpx;white-space: nowrap;margin-left: 20rpx;background-color:#EB5D4B;color: #FFFFFF;">搜索</button>
			</view>
			<view class="grace-body">
				<view class="grace-img-card">
					<view
						class="grace-img-card-item"
						:data-productid="index"
						v-for="(item, index) in goods"
						:key="index"
						@tap="openProductInfo(item.product_id)"
						style="background-color: #FFFFFF;padding: 0 0 20rpx;margin-top: 20rpx;border-radius: 18rpx;"
					>
						<view class="grace-img-card-img"><image :src="gRequest.apiUrlImages + item.image" mode="scaleToFill" class="grace-img-card-img"></image></view>
						<text class="grace-img-card-title grace-ellipsis" style="padding: 0 20rpx;color: #666666;">{{ item.name }}</text>
						<view style="padding: 0 20rpx;">
							<text class="grace-img-card-price" style="font-weight: 600;color: #EB5D4B;margin-right: 0rpx;">1200</text>
							<text class="grace-text-small" style="color: #EB5D4B;">积分</text>
							<text class="iconfont icon-gouwuchezhengpin" style="font-size: 40rpx;color: #E14F3D;margin-left: 140rpx;position: relative;top: 6rpx;"></text>
						</view>
					</view>
				</view>
			</view>
			<graceEmpty v-if="goods.length==0">
				<view slot="img" class="empty-view">
					<!-- 请根据您的项目要求制作并更换为空图片 -->
					<image class="empty-img" mode="widthFix" src="https://staticimgs.oss-cn-beijing.aliyuncs.com/empty.png"></image>
				</view>
				<text slot="text" class="grace-text-small grace-gray">抱歉，没有数据</text>
			</graceEmpty>
		</view>
	</gracePage>
</template>
<script>
import gracePage from '../../graceUI/components/gracePage.vue';
import graceNavBar from '../../graceUI/components/graceNavBar.vue';
import graceHeader from '../../graceUI/components/graceHeader.vue';
import graceEmpty from '../../graceUI/components/graceEmptyNew.vue';
import graceSearch from "../../graceUI/components/graceSearch.vue";
export default {
	data() {
		return {
			navItemsList: [],
			navItems: [],
			swiperItems: [],
			navIndex: 0,
			indexCate: [],
			goods: [],
			indexCateAndProducts: [],
			top: 0,
			images: [],
			urlParams:{},
			serach_str:""
		};
	},
	components: {
		gracePage,
		graceNavBar,
		graceHeader,
		graceEmpty,
		graceSearch
	},
	onLoad: function(option) {
		this.urlParams = option
		uni.setNavigationBarTitle({
		　　title:option.name
		})
		//获取商品
		this.getGoods();
	},
	methods: {
		searchInput(value){
			console.log(value)
			this.serach_str = value
		},
		goback: function() {
			uni.navigateBack({});
		},
		getGoods: function() {
			this.gRequest.get(
				'/jifenproduct/productlist2',
				{
					category_id: this.urlParams.uid
				},
				res => {
					this.setData({ goods: res.data });
				}
			);
		},
		// 打开商品详情
		openProductInfo: function(e) {
			uni.navigateTo({ url: '../pointsMall/pointMallProductInfo?product_id='+e });
		}
	}
};
</script>
<style>
page {
	background-color: #f8f8f8;
}
/* 九宫格个性修饰 */
.grace-grids-items {
	width: 20%;
	padding: 25rpx 0;
	box-sizing: border-box;
}
.grace-grids-image {
	width: 80rpx;
	height: 80rpx;
}
/* 产品列表修饰 */
.grace-img-card-img {
	height: 340rpx;
}
.grace-img-card-price {
	margin-right: 20rpx;
}
.hede-bg {
	background-image: url('../../static/header_bg.png');
	background-size: 100% auto;
	background-position: top left;
	background-repeat: no-repeat;
}
.top-user-info {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	height: 180rpx;
	background: linear-gradient(268deg, rgba(235, 93, 75, 1), rgba(253, 129, 95, 1));
	padding: 0 42rpx;
	.ucenter-face {
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #ffffff;
		.user-name {
			margin-left: 28rpx;
		}
		.ucenter-face-image {
			width: 100rpx !important;
			height: 100rpx !important;
			border-radius: 50%;
			border: 2rpx solid #ffffff;
		}
	}
}
.empty-view {
	width: 280rpx;
	height: 280rpx;
	border-radius: 280rpx;
	background-color: #f6f7f8;
	margin-top: 200rpx;
}
.empty-img {
	width: 220rpx;
	height: 200rpx;
	margin: 40rpx;
	border-radius: 200rpx;
}
.grace-text-small {
	margin-top: 10px;
}
</style>
